<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        /*用于让表格边框合并为一条实线 */
        border-collapse: collapse;
      }
      ​ table,
      th,
      td {
        /* 定义单元格边框的样式，这里设置为1像素的黑色实线 */
        border: 1px solid black;
        padding: 5px;
      }
      .active {
        background-color: chocolate;
      }
    </style>
  </head>
  <body>
    <table id="tab1" border="1" width="800" align="center">
      <thead>
        <tr>
          <th width="100px">
            <input type="checkbox" id="j_cbAll1" />全/<input
              type="checkbox"
              id="j_cbAll2"
            />反选
          </th>
          <th>分类ID</th>
          <th>分类名称</th>
          <th>分类描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>1</td>
          <td>手机数码</td>
          <td>手机数码类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>2</td>
          <td>电脑办公</td>
          <td>电脑办公类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>3</td>
          <td>鞋靴箱包</td>
          <td>鞋靴箱包类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <!-- <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>5</td>
          <td>牛奶制品</td>
          <td>牛奶制品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>6</td>
          <td>大豆制品</td>
          <td>大豆制品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>7</td>
          <td>海参制品</td>
          <td>海参制品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>8</td>
          <td>羊绒制品</td>
          <td>羊绒制品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>9</td>
          <td>海洋产品</td>
          <td>海洋产品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>10</td>
          <td>奢侈用品</td>
          <td>奢侈用品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>10</td>
          <td>奢侈用品</td>
          <td>奢侈用品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
          <td><input type="checkbox" class="checkbox" /></td>
          <td>4</td>
          <td>家居饰品</td>
          <td>家居饰品类商品</td>
          <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr> -->
      </tbody>
    </table>
    <script>
      let trs = document.querySelector("tbody").querySelectorAll("tr");
      let j_cbAll1 = document.querySelector("#j_cbAll1"); //全选
      let j_cbAll2 = document.querySelector("#j_cbAll2"); //反选
      let checkbox = document.querySelectorAll("tbody .checkbox");

      for (let i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
          for (let j = 0; j < trs.length; j++) {
            trs[j].classList.remove("active");
          }
          this.classList.add("active");
        };
      }

      j_cbAll1.onclick = function () {
        for (let i = 0; i < checkbox.length; i++) {
          checkbox[i].checked = this.checked;
        }
        // checkbox[0].checked = this.checked;
        // checkbox[1].checked = this.checked;
        // checkbox[2].checked = this.checked;
      };

      for (let i = 0; i < checkbox.length; i++) {
        checkbox[i].onclick = function () {
          // let flag = true;
          // for (let j = 0; j < checkbox.length; j++) {
          //   if (!checkbox[j].checked) {
          //     flag = false;
          //   }
          // }
          // j_cbAll1.checked = flag;

          let flag = true;

          for (let j = 0; j < checkbox.length; j++) {
            console.dir(checkbox);
            if (checkbox[j].checked === false) {
              flag = false;
            }
          }

          if (flag) {
            console.log("全部选中了");
            j_cbAll1.checked = true;
          } else {
            console.log("没有全部选中");
            j_cbAll1.checked = false;
          }

          //  j_cbAll1.checked = flag;
        };
      }
      j_cbAll2.onclick = function () {
        for (let i = 0; i < checkbox.length; i++) {
          checkbox[i].checked = !this.checked;
        }
      };
    </script>
  </body>
</html>
